<!DOCTYPE html>
<!-- saved from url=(0138)https://v.xindongxc.com/app/index.php?i=2&c=entry&m=meepo_xianchangv2&do=mobile&r=screen.tug&hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&hdhash= -->
<html lang="zh">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="renderer" content="webkit" />
    <title>大屏拔河</title>
    <link rel="stylesheet" href="./static/zam-icon.css" media="all" />
    <link rel="stylesheet" href="./static/mxc-icon.css" media="all" />
    <link rel="stylesheet" href="./static/style.css" media="all" />
    <link rel="stylesheet" href="./static/animate.css" />
    <script src="./static/jquery.2.1.4.js"></script>
    <script type="text/javascript" src="./static/require.js"></script>
    <script type="text/javascript">
      require.config({
        baseUrl: "http://localhost:8080/static",
        urlArgs: "v=20200916", //+Math.random(),
        paths: {
          css: "css.min",
          jquery: "jquery.2.1.4",
          "jquery.ui": "jquery/jquery-ui-1.10.3.min",
          jquerytrans: "screenjs/jquery.transit.min",
          velocity: "screenjs/velocity",
          zamnotice: "zamnotice/zamnotice",
          jbox: "jbox/jBox",
          jboxnotice: "jbox/plugins/Notice/jBox.Notice.min",
          template: "template/template",
          swiper: "swiper/swiper.min",
          marqueen: "wechatjs/marqueen",
          screencore: "screenjs/screencore",
          layer: "layer/layer",
          layerBox: "layer/layerBox",
          layerExt: "layer/layer.ext",
          screensocket: "screenjs/screensocket",
          keyboard: "keyboard/keyboard.min",
          msgs: "screenjs/msgs",
          screenbp: "screenjs/screenbp",
          screenbpdata: "screenjs/screenbpdata",
          bgscreen: "screenjs/bgscreen",
          colorPicker: "jqcolorpicker",
          colors: "colors",
          ionrangeslider: "ionrangeslider/ionrangeslider",
          onoffswitch: "onoffswitch/on-off-switch",
          onoffswitchauto: "onoffswitch/on-off-switch-onload",
          videocontrol: "screenjs/videocontrol",
          slideranimate: "screenjs/slideranimate",
          rightboxslider: "screenjs/rightboxslider",
          signs: "screenjs/signs",
          screengame: "screenjs/screengame",
          screenshuqian: "screenjs/screenshuqian",
          screenmonkey: "screenjs/screenmonkey",
          screencar: "screenjs/screencar",
          screenhorse: "screenjs/screenhorse",
          screenmls: "screenjs/screenmls",
          screenbike: "screenjs/screenbike",
          screenswim: "screenjs/screenswim",
          screenthreed: "screenjs/screenthreed",
          screentug: "screenjs/screentug",
          screenanswerbs: "screenjs/screenanswerbs",
          screendzqy: "screenjs/screendzqy",
          screenliuyancj: "screenjs/screenliuyancj",
          screenbigcj: "screenjs/screenbigcj",
          screenlivemark: "screenjs/screenlivemark",
          screendgshake: "screenjs/screendgshake",
          screenjjb: "screenjs/screenjjb",
          screencutfruit: "screenjs/screencutfruit",
          dragqr: "screenjs/dragqr",
          fulldm: "screenjs/fulldm",
          snabbt: "screenjs/snabbt",
          lotteryani: "screenjs/lotteryani",
          videojs: "videojs/video",
          domtoimage: "domtoimg/domtoimage",
          filesaver: "domtoimg/filesaver",
        },
        shim: {
          zamnotice: {
            deps: ["css!../js/zamnotice/zamnotice.css"],
          },
          jbox: {
            deps: ["css!../js/jbox/jBox.css"],
          },
          jboxnotice: {
            deps: ["jbox", "css!../js/jbox/plugins/Notice/jBox.Notice.css"],
          },
          template: {
            exports: "template",
          },
          swiper: {
            exports: "Swiper",
            deps: ["css!../js/swiper/swiper.min.css"],
          },
          marqueen: {
            exports: "marqueen",
          },
          screencore: {
            exports: "screencore",
          },
          layer: {
            exports: "layer",
            deps: ["css!layer.css"],
          },
          layerBox: {
            exports: "layerBox",
            deps: ["layer"],
          },
          layerExt: {
            deps: ["layer"],
          },
          screensocket: {
            exports: "screensocket",
          },
          keyboard: {
            exports: "keyboardJS",
          },
          msgs: {
            exports: "msgs",
          },
          signs: {
            exports: "signs",
          },
          screengame: {
            exports: "screengame",
          },
          screenbp: {
            exports: "screenbp",
          },
          screenbpdata: {
            exports: "screenbpdata",
          },
          bgscreen: {
            exports: "bgscreen",
          },
          colorPicker: {
            deps: ["jquery"],
            exports: "jQuery.fn.colorPicker",
          },
          colors: {
            exports: "Colors",
          },
          slideranimate: {
            exports: "slideranimate",
          },
          videocontrol: {
            exports: "videocontrol",
          },
          rightboxslider: {
            exports: "rightboxslider",
          },
          ionrangeslider: {
            deps: ["css!../js/ionrangeslider/ionrangeslider.css"],
          },
          onoffswitchauto: {
            deps: ["onoffswitch", "css!../js/onoffswitch/on-off-switch.css"],
          },
          screenshuqian: {
            exports: "screenshuqian",
          },
          screenmonkey: {
            exports: "screenmonkey",
          },
          screencar: {
            exports: "screencar",
          },
          screenhorse: {
            exports: "screenhorse",
          },
          screenmls: {
            exports: "screenmls",
          },
          screenbike: {
            exports: "screenbike",
          },
          screenswim: {
            exports: "screenswim",
          },
          screenthreed: {
            exports: "screenthreed",
          },
          screentug: {
            exports: "screentug",
          },
          screenanswerbs: {
            exports: "screenanswerbs",
          },
          screendzqy: {
            exports: "screendzqy",
          },
          screenliuyancj: {
            exports: "screenliuyancj",
          },
          screenbigcj: {
            exports: "screenbigcj",
          },
          screenlivemark: {
            exports: "screenlivemark",
          },
          screendgshake: {
            exports: "screendgshake",
          },
          dragqr: {
            exports: "dragqr",
          },
          videojs: {
            exports: "videojs",
            deps: ["css!../js/videojs/video.css"],
          },
          domtoimage: {
            exports: "domtoimage",
          },
        },
      });
      define("jquery", [], function () {
        return jQuery;
      });
      (function ($) {
        $.fn.extend({
          animateControl: function (anicss, callback) {
            var self = this;
            self
              .addClass("animated " + anicss)
              .one("animationend webkitAnimationEnd", function () {
                self.removeClass("animated " + anicss);
                if (typeof callback === "function") {
                  callback($(self));
                }
              });
            //return self;
          },
        });
      })(jQuery);
      var modulepage = 1,
        footerMenu_w,
        footerMenu_os_w,
        footerMenu_t,
        footerMenu_lt,
        footerMenu_tp;
      !(function (t, i, e) {
        var s = function () {
          var zoom = (i.innerHeight / 800).toFixed(4);
          $(".full-main").css({
            width: (i.innerWidth / zoom).toFixed(4) + "px",
            zoom: zoom,
          });
          var autowidth =
            (i.innerWidth / zoom).toFixed(4) -
            $(".control-msg-list").outerWidth(true) -
            $(".control-normal-list").outerWidth();
          $(".control-module-list").css({ width: autowidth + "px" });
          modulepage = 1;
          $(".control-module-list .wrap").css({
            transform: "translate3d(0px,0px, 0px)",
          });
          footerMenu_w = (autowidth - 60) * zoom;
          var totalson = $(".control-module-list .wrap .icon-box");
          var visibleNums = 0;
          totalson.each(function () {
            var top = $(this)[0].getBoundingClientRect().top;
            if (top == totalson[0].getBoundingClientRect().top) {
              visibleNums++;
            }
          });
          footerMenu_t = $(".control-module-list .wrap .icon-box").length;
          footerMenu_tp = Math.ceil(footerMenu_t / visibleNums);
        };
        t.addEventListener !== e &&
          (i.addEventListener("resize", s, !1),
          t.addEventListener("DOMContentLoaded", s, !1));
      })(document, window);
      var XCV2Config = {
        attchurl: "https://hdfj.xindongxc.com/",
        cookie: { pre: "faaf_" },
        hdid: "wkbtx09raxkc17enjy7ccit4crauj0xk",
        hdhash: "",
        rhdid: "3788",
        wsAddress: "wss://hkj.xindongxc.com:9011",
        bgmusic:
          "https://v.xindongxc.com/addons/meepo_xianchangv2/template/resource/images/screen/common/bg.mp3",
        openbgmusic: "1",
        screenfollow: "1",
        gametype: "tug",
        rotateid: parseInt("0"),
        defaultImg: "",
        bdinfo: { openreal: "2", openupimg: "2" },
      };
    </script>
  </head>
  <body>
    <style>
      .headerTitle .title-item {
        color: #ffffff;
        font-size: 30px;
      }
    </style>
    <div class="pc-box">
      <div class="full-main" style="width: 1748.37px; zoom: 0.7813">
        <div class="main-box">
          <header class="header zam-app-flex">
            <div class="headerLogo zam-app-flex-ajCenter2">
              <!-- <img src="./static/LkYSbBMb7oUdbZkSU6ty7Sv56b87s5.png" /> -->
            </div>
            <ul class="headerTitle">
              <li class="title-item"></li>
            </ul>
            <div class="headerTips zam-app-flex-ajCenter2">
              <div class="joinPeople">
                <div></div>
              </div>
            </div>
          </header>
          <style>
            .tug-mainbox {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              padding: 0;
              overflow: hidden;
            }
            .tug-title {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100px;
              text-align: center;
              font-size: 24px;
              line-height: 100px;
              color: #fff;
              z-index: 1;
            }
            .tug-bgbox {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: -1;
            }
            .tug-topbg {
              position: relative;
              width: 100%;
              height: 390px;
              overflow: hidden;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-topbg > div {
              height: 100%;
              overflow: hidden;
            }
            .tug-topbg .tug-leftside {
              width: calc((100% - 1406px) / 2);
              background: url("./static/img/leftside.png")
                0% 0% / 200px 100% repeat-x;
              transform: rotate3d(0, 1, 0, 180deg) translateX(-1px);
            }
            .tug-topcenter {
              width: 1406px;
              position: relative;
              background-position: 50%;
              background-image: url("./static/img/topbg.png");
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-topcenter-ad {
              position: absolute;
              width: 432px;
              height: 109px;
              top: 114px;
              left: calc((100% - 432px) / 2);
              background-image: url("");
              background-size: cover;
              background-position: 50%;
            }
            .tug-rightside {
              width: calc((100% - 1406px) / 2);
              background: url("./static/img/leftside.png")
                0% 0% / 200px 100% repeat-x;
              transform: translateX(-2px);
            }
            /*bottombg*/
            .tug-bottombg {
              width: 100%;
              position: relative;
              transform: translateY(-6px);
              height: 416px;
            }

            .tug-personbox {
              position: absolute;
              z-index: 10;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
              color: #fff;
            }
            .tug-leftperson {
              width: 78px;
              height: 40px;
              top: -90px;
              left: calc(((100% - 78px) / 2) - 190px);
              background-color: rgb(250 159 19);
              border: 1px solid #fff;
              border-radius: 2px;
              font-size: 20px;
            }
            .tug-rightperson {
              width: 78px;
              height: 40px;
              top: -90px;
              left: calc(((100% - 78px) / 2) + 190px);
              background-color: rgb(250 159 19);
              border: 1px solid #fff;
              border-radius: 2px;
              font-size: 20px;
            }
            .tug-teamflag {
              position: absolute;
              background-repeat: no-repeat, no-repeat;
              z-index: 5;
            }
            .tug-leftflag {
              width: 112px;
              height: 233px;
              top: -210px;
              left: calc(((100% - 112px) / 2) - 310px);
              background-image: url("./static/img/leftflag.png"),
                url("");
              background-size: 112px 233px, 78px 98px;
              background-position: 0px 0px, 23px 53px;
            }
            .tug-rightflag {
              width: 112px;
              height: 233px;
              top: -210px;
              left: calc(((100% - 112px) / 2) + 313px);
              background-image: url("./static/img/rightflag.png"),
                url("");
              background-size: 112px 233px, 78px 98px;
              background-position: 0px 0px, 10px 53px;
            }
            .tug-teamname {
              background-position: 50%;
              position: absolute;
              z-index: 6;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-leftname {
              width: 276px;
              height: 86px;
              top: 328px;
              left: calc(((100% - 276px) / 2) - 374px);
              background-image: url("./static/img/namebg.png");
              font-size: 24px;
              color: rgb(255, 232, 84);
            }
            .tug-rightname {
              width: 276px;
              height: 86px;
              top: 328px;
              left: calc(((100% - 276px) / 2) + 374px);
              background-image: url("./static/img/namebg.png");
              font-size: 24px;
              color: rgb(255, 232, 84);
            }
            .tug-bottombgimg {
              width: 100%;
              background-position: top;
              background-repeat: no-repeat;
              height: 493px;
              transform: translateY(-77px);
              background-image: url("./static/img/bottombg.png");
            }
            /*准备层*/
            .tug-readybox {
              width: 100%;
              height: 100%;
            }
            .tug-readytop {
              width: 100%;
              position: relative;
              height: 390px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-timebox {
              position: absolute;
              font-family: sans-serif;
              font-weight: 620;
              top: 265px;
              left: calc((100% - 180px) / 2);
              width: 189px;
              height: 72px;
              color: #fff;
              font-size: 64px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              -ms-flex-pack: justify;
              justify-content: space-between;
            }
            .tug-timebox span {
              height: 100%;
              width: 60px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-readybottom {
              width: 100%;
              position: relative;
              transform: translateY(-6px);
              height: 416px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-readyteam1 {
              position: absolute;
              top: 155px;
              left: calc(((100% - 351px) / 2) - 330px);
              display: inline-block;
              width: 351px;
              height: 133px;
            }
            .tug-readyteam2 {
              position: absolute;
              top: 155px;
              left: calc(((100% - 351px) / 2) + 330px);
              display: inline-block;
              width: 351px;
              height: 133px;
            }
            .tug-start {
              position: absolute;
              display: inline-block;
              cursor: pointer;
              top: 172px;
              left: calc((100% - 166px) / 2);
              width: 172px;
              height: 60px;
            }
            .tug-rope {
              position: absolute;
              top: 300px;
              left: calc((100% - 1166px) / 2);
              width: 1185px;
              height: 60px;
              background-image: url("./static/img/rope.png");
            }
            /*结束层*/
            .tug-endbox {
              position: relative;
              width: 100%;
              height: 100%;
              display: none;
            }
            .tug-endtop {
              width: 100%;
              position: relative;
              height: 390px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-endleftrole {
              display: inline-block;
              width: 80px;
              height: 130px;
              position: absolute;
              top: 230px;
              left: calc((((100% - 80px) / 2) - 114px) - 40px);
            }
            .tug-endtimebox {
              position: absolute;
              font-family: Arial;
              font-weight: 700;
              top: 264px;
              left: calc((100% - 189px) / 2);
              width: 189px;
              height: 72px;
              color: rgb(255, 255, 255);
              font-size: 60px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              -ms-flex-pack: justify;
              justify-content: space-between;
            }
            .tug-endtimebox span {
              height: 100%;
              width: 60px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-endrightrole {
              display: inline-block;
              width: 80px;
              height: 130px;
              position: absolute;
              top: 230px;
              left: calc((((100% - 80px) / 2) + 114px) + 40px);
            }
            .tug-endbottom {
              width: 100%;
              position: relative;
              transform: translateY(-6px);
              height: 416px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .tug-endbottom * {
              position: absolute;
            }
            .endrope {
              top: 300px;
              left: calc((100% - 1166px) / 2);
              width: 1185px;
              height: 60px;
              background-image: url("./static/img/rope.png");
            }
            .tug-rteamwin .endleftteam {
              width: 442px;
              height: 310px;
              top: 35px;
              left: calc(((100% - 442px) / 2) - 360px);
            }
            .tug-rteamwin .endrightteam {
              width: 270px;
              height: 237px;
              top: 90px;
              left: calc(((100% - 351px) / 2) + 330px);
            }
            .tug-bteamwin .endleftteam {
              width: 270px;
              height: 237px;
              top: 90px;
              left: calc(((100% - 442px) / 2) - 180px);
            }
            .tug-bteamwin .endrightteam {
              width: 442px;
              height: 310px;
              top: 35px;
              left: calc(((100% - 351px) / 2) + 330px);
            }
            .endnextbtn {
              display: inline-block;
              cursor: pointer;
              top: 172px;
              left: calc((100% - 166px) / 2);
              width: 172px;
              height: 60px;
            }
            .endrankbtn {
              display: inline-block;
              cursor: pointer;
              top: 237px;
              left: calc((100% - 166px) / 2);
              width: 172px;
              height: 60px;
            }
            /*draw 平局*/
            .drawleftteam {
              width: 390px;
              height: 133px;
              top: 160px;
              left: calc(((100% - 390px) / 2) - 330px);
            }
            .drawrightteam {
              width: 390px;
              height: 133px;
              top: 160px;
              left: calc(((100% - 390px) / 2) + 330px);
            }
            .drawlogo {
              top: -10px;
              left: calc((100% - 214px) / 2);
              width: 214px;
              height: 169px;
            }
            .restart {
              top: 202px;
              left: calc((100% - 166px) / 2);
              width: 172px;
              height: 60px;
            }
            .tug-drawbox .endrankbtn {
              top: 277px;
            }
            /*排名*/
            .tug-rankbox {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: 99;
              overflow: hidden;
              background: url("./static/img/rankbg.png")
                center center / 733px 515px no-repeat rgba(0, 0, 0, 0.6);
              display: none;
            }
            .tug-closerank {
              position: absolute;
              width: 30px;
              height: 30px;
              top: 145px;
              left: calc(50% + 383px);
              cursor: pointer;
              z-index: 100;
              background: #fff;
              line-height: 30px;
              text-align: center;
              border-radius: 50%;
            }
            .tug-rankmain {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              margin: auto;
              width: 687px;
              height: 458px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              -ms-flex-pack: justify;
              justify-content: space-between;
            }
            .tug-rankteam {
              margin-top: 50px;
              width: 50%;
              height: 450px;
            }
            .tug-ranktitle {
              width: 330px;
              height: 80px;
              padding-left: 0;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              -ms-flex-pack: justify;
              justify-content: space-between;
            }
            .tug-wincpu {
              width: 88px;
              height: 74px;
              background: url("./static/img/wincpu.png")
                center center no-repeat;
              margin-top: -20px;
            }
            .tug-rankname {
              margin-top: 20px;
              font-size: 18px;
              color: #fff;
            }
            .tug-ranklogo {
              width: 78px;
              height: 77px;
            }
            .tug-ranklogo.winlogo {
              background: url("./static/img/winlogo.png")
                center center no-repeat;
            }
            .tug-ranklogo.faillogo {
              background: url("./static/img/faillogo.png")
                center center no-repeat;
            }
            .tug-ranklist {
              width: 100%;
              height: 350px;
              overflow-y: scroll;
              overflow-x: hidden;
              margin-right: 0px;
            }
            .leftlist {
              margin-right: 0px;
              width: 100%;
            }
            .rightlist {
              margin-right: 20px;
              width: calc(100% - 20px);
            }
            .tug-rankcell {
              padding: 0 20px;
              font-size: 16px;
              color: #fff;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              -ms-flex-pack: justify;
              justify-content: space-between;
            }
            .tug-rankcell.hasavatar {
              height: 40px;
              line-height: 40px;
              margin-top: 7px;
            }
            .tug-rankcell.hasavatar > div {
              height: 100%;
            }
            .tug-rankcol1 {
              width: 40px;
              font-size: 18px;
              font-weight: 500;
              text-align: center;
            }
            .tug-rankcol2 {
              width: 145px;
              font-size: 14px;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
            }
            .tug-rankheader {
              position: relative;
              overflow: hidden;
              width: 40px;
              height: 40px;
              -webkit-flex-shrink: 0;
              -ms-flex-negative: 0;
              flex-shrink: 0;
            }
            .tug-rankheader img {
              display: inline-block;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              margin: auto;
              border-radius: 50%;
              width: 40px;
              height: 40px;
            }
            .tug-rankavatar {
              height: 38px;
              width: 38px;
              z-index: 2;
            }
            .tug-ranknickname {
              margin-left: 10px;
            }
            .tug-rankcol3 {
              font-size: 14px;
              width: 40px;
              text-align: center;
            }
            .tug-rankf16 {
              font-size: 16px;
            }
            /*拔河过程中*/
            .tug-usering {
              width: 1280px;
              height: 300px;
              position: absolute;
              top: 154px;
              left: calc((100% - 1285px) / 2);
              transition: left 0.8s linear;
              -webkit-transition: left 0.8s linear;
              -moz-transition: left 0.8s linear;
              -o-transition: left 0.8s linear;
              -ms-transition: left 0.8s linear;
              display: none;
            }
            .play-box-left {
              position: absolute;
              left: 0px;
              top: 0px;
            }
            .play-box-right {
              position: absolute;
              right: 0;
              left: 0;
            }
            .play-box-left .player-icon {
              background-image: url("./static/img/red.gif");
            }
            .play-box-right .player-icon {
              background-image: url("./static/img/blue.gif");
            }
            .player {
              width: 65px;
              height: 114px;
              position: absolute;
              z-index: 1;
            }
            .player .player-icon {
              position: absolute;
              width: 65px;
              height: 114px;
              background-repeat: no-repeat;
            }
            .play-box-left .player .player-user {
              position: relative;
              margin-top: -60px;
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background-image: url(./static/img/avatarbg.png);
              background-size: cover;
              background-repeat: no-repeat;
              visibility: hidden;
            }
            .play-box-right .player .player-user {
              position: relative;
              margin-top: -60px;
              margin-left: 10px;
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background-image: url(./static/img/avatarbg.png);
              background-size: cover;
              background-repeat: no-repeat;
              visibility: hidden;
            }
            .play-box-left .player .player-user .player-nickname {
              position: absolute;
              top: -110px;
              left: -156px;
              height: 40px;
              line-height: 40px;
              color: #fff;
              text-align: right;
              font-size: 20px;
              transform: rotate(50deg);
              width: 200px;
            }
            .play-box-right .player .player-user .player-nickname {
              position: absolute;
              top: -110px;
              left: 5px;
              height: 40px;
              line-height: 40px;
              color: #fff;
              font-size: 20px;
              transform: rotate(-50deg);
              width: 200px;
            }
            .tug-ropeing {
              position: absolute;
              top: 46px;
              left: calc((100% - 1266px) / 2);
              width: 1280px;
              height: 67px;
              background-image: url("./static/img/rope2.png");
              background-size: cover;
              background-repeat: no-repeat;
              z-index: -1;
            }
          </style>
          <audio
            id="countaudio"
            src="https://v.xindongxc.com/addons/meepo_xianchangv2/template/resource/images/wechat/shake/count.mp3"
            preload="preload"
            style="display: none"
          ></audio>
          <audio
            id="overaudio"
            src="https://v.xindongxc.com/addons/meepo_xianchangv2/template/resource/images/screen/shake/over.mp3"
            preload="preload"
            style="display: none"
          ></audio>
          <audio
            id="joinaudio"
            src="https://v.xindongxc.com/addons/meepo_xianchangv2/template/resource/images/screen/shake/join.mp3"
            preload="preload"
            style="display: none"
          ></audio>
          <div class="shake-mainbox tug-mainbox normal-box">
            <div class="emptybox zam-app-flex-ajCenter display-none">
              <img src="./static/empty.png" />
              <p style="padding: 20px">暂无可用轮次，请到后台添加</p>
            </div>
            <div class="tug-title" style="line-height: 100px">默认轮次</div>
            <div class="tug-bgbox">
              <div class="tug-topbg">
                <div class="tug-leftside"></div>
                <div class="tug-topcenter">
                  <!-- <div
                    class="tug-topcenter-ad"
                    style="
                      background-image: url('./static/img/topadv.jpg');
                    "
                  ></div> -->
                </div>
                <div class="tug-rightside"></div>
              </div>
              <div class="tug-bottombg">
                <div class="tug-personbox tug-leftperson"><span>0</span>人</div>
                <div class="tug-personbox tug-rightperson">
                  <span>0</span>人
                </div>
                <div
                  class="tug-teamflag tug-leftflag"
                  style="
                    background-image: url('./static/img/leftflag.png'),
                      url('./static/img/red.png');
                  "
                ></div>
                <div
                  class="tug-teamflag tug-rightflag"
                  style="
                    background-image: url('./static/img/rightflag.png'),
                      url('./static/img/blue.png');
                  "
                ></div>
                <div class="tug-teamname tug-leftname">红队</div>
                <div class="tug-teamname tug-rightname">蓝队</div>
                <div class="tug-bottombgimg"></div>
              </div>
            </div>
            <!--tug-bgbox end -->
            <div class="tug-readybox">
              <div class="tug-readytop">
                <div class="tug-timebox">
                  <span>0</span>
                  <span>3</span>
                  <span>0</span>
                </div>
              </div>
              <div class="tug-readybottom">
                <div class="tug-readyinfo">
                  <!--游戏准备中显示-->
                  <img src="./static/reds.png" class="tug-readyteam1" />
                  <img src="./static/blues.png" class="tug-readyteam2" />
                  <img src="./static/start.png" class="tug-start" />
                  <div class="tug-rope"></div>
                </div>
                <div class="tug-usering">
                  <!--游戏开始后显示-->
                  <div class="play-box-left">
                    <div class="player" style="left: 60px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="left: 120px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="left: 180px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="left: 240px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <!-- <div class="player" style="left: 300px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="left: 360px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="left: 420px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="left: 480px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div> -->
                  </div>
                  <div class="play-box-right">
                    <div class="player" style="right: 40px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="right: 100px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="right: 160px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="right: 220px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="right: 280px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="right: 340px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="right: 400px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                    <div class="player" style="right: 460px">
                      <div class="player-icon">
                        <div class="player-user">
                          <div class="player-nickname limitbox">赞木</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tug-ropeing"></div>
                </div>
                <!--tug-usering end -->
              </div>
            </div>
            <!-- tug-readybox end -->
            <div class="tug-endbox">
              <!--游戏结束后显示 红赢 蓝赢 或平局-->
              <div class="tug-endtop">
                <img src="./static/endred.png" class="tug-endleftrole" />
                <div class="tug-endtimebox">
                  <span>0</span>
                  <span>0</span>
                  <span>0</span>
                </div>
                <img src="./static/endblue.png" class="tug-endrightrole" />
              </div>
              <div class="tug-endbottom">
                <div class="endrope"></div>
                <div class="tug-winbox display-none">
                  <div class="tug-rteamwin display-none">
                    <img src="./static/winred.png" class="endleftteam" />
                    <img src="./static/failblue.png" class="endrightteam" />
                  </div>
                  <div class="tug-bteamwin display-none">
                    <img src="./static/failred.png" class="endleftteam" />
                    <img src="./static/winblue.png" class="endrightteam" />
                  </div>
                  <img src="./static/next.png" class="endnextbtn" />
                  <img src="./static/rank.png" class="endrankbtn" />
                </div>
                <div class="tug-drawbox display-none">
                  <img src="./static/drawred.png" class="drawleftteam" />
                  <img src="./static/drawblue.png" class="drawrightteam" />
                  <img src="./static/draw.png" class="drawlogo" />
                  <img src="./static/next.png" class="restart" />
                  <img src="./static/rank.png" class="endrankbtn" />
                </div>
              </div>
              <div class="tug-rankbox">
                <!--点击排名，排名结果-->
                <div class="tug-closerank">x</div>
                <div class="tug-rankmain">
                  <div class="tug-rankteam tug-rrank">
                    <div class="tug-ranktitle">
                      <div class="tug-wincpu display-none"></div>
                      <div class="tug-rankname">红队</div>
                      <div class="tug-ranklogo"></div>
                    </div>
                    <div class="tug-ranklist leftlist">
                      <div class="tug-rankcell tug-rankcell-title">
                        <div class="tug-rankcol1 tug-rankf16">排名</div>
                        <div class="tug-rankcol2 tug-rankf16">头像昵称</div>
                        <div class="tug-rankcol3 tug-rankf16">分数</div>
                      </div>
                    </div>
                  </div>
                  <div class="tug-rankteam tug-brank">
                    <div
                      class="tug-ranktitle"
                      style="padding-left: 20px; width: 310px"
                    >
                      <div class="tug-wincpu display-none"></div>
                      <div
                        class="tug-rankname"
                        style="color: rgb(255, 255, 255)"
                      >
                        蓝队
                      </div>
                      <div class="tug-ranklogo"></div>
                    </div>
                    <div
                      class="tug-ranklist rightlist"
                      style="margin-right: 0px; width: 100%"
                    >
                      <div class="tug-rankcell tug-rankcell-title">
                        <div class="tug-rankcol1 tug-rankf16">排名</div>
                        <div class="tug-rankcol2 tug-rankf16">头像昵称</div>
                        <div class="tug-rankcol3 tug-rankf16">分数</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--rankbox end-->
              </div>
              <!--tug-endbox end -->
            </div>
            <!--tug-mainbox end -->
            <div class="webstartdjs zam-app-flex-ajCenter2 display-none">
              <div class="webstartdjsBox zam-app-flex-ajCenter2">
                <span class="startdjsani">0</span>
              </div>
            </div>
            <div class="webgamedjs zam-app-flex-ajCenter2 display-none">
              <span class="gamedjsani">0</span>
            </div>
            <script id="tugrank-tpl" type="html/javascript">
              <div  class="tug-rankcell hasavatar">
              	<div class="tug-rankcol1" {{ if num<=2 }}style="background: url({{ rankimg }}) center center no-repeat;" {{ /if }}>{{ if num>2 }}{{ num+1 }}{{ /if }}</div>
              	<div  class="tug-rankcol2">
              		<div  class="tug-rankheader">
              			<img src="{{ avatar }}" class="tug-rankavatar">
              		</div>
              		<div  class="tug-ranknickname limitbox">{{ nickname }}</div>
              	</div>
              	<div  class="tug-rankcol3">{{ score }}</div>
              </div>
            </script>
            <script>
              var rankimgs = [
                  "./static/img/1.png",
                  "./static/img/2.png",
                  "./static/img/3.png",
                ],
                teamflags = {
                  redflag:
                    "./static/img/leftflag.png",
                  blueflag:
                    "./static/img/rightflag.png",
                };
              require(["screentug"], function (screentug) {
                screentug.init();
              });
            </script>
            <footer class="footer" style="visibility: hidden"></footer>
          </div>
          <!--main-box-->
          <style>
            .footer-controlBox {
              position: absolute;
              z-index: 10;
              bottom: 0px;
              width: 100%;
              -webkit-transition: 0.5s;
              transition: 0.5s;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
            }
            .footer-controlBox.down {
              bottom: -65px;
            }
            .footer-controlBox.up {
              bottom: 0px;
            }
            .footer-controlBox-main {
              width: 100%;
              height: 100%;
              background-color: #00000076;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              -ms-flex-pack: justify;
              justify-content: space-between;
            }
            .footer-controlBox-main .icon-box {
              position: relative;
              height: 65px;
              margin: 0 10px;
              cursor: pointer;
              -webkit-flex-shrink: 0;
              -ms-flex-negative: 0;
              flex-shrink: 0;
            }
            .footer-controlBox-main .icon-box .icon {
              width: -webkit-max-content;
              width: -moz-max-content;
              width: max-content;
              height: 100%;
              text-align: center;
            }
            .footer-controlBox-main .icon-box .icon .icon-wrap {
              width: 32px;
              height: 32px;
              border-radius: 100%;
              background-color: #74c0ff;
            }
            .footer-controlBox-main .icon-box .icon .icon-wrap i {
              color: #fff;
              font-size: 18px;
            }
            .footer-controlBox-main .icon-box .icon .name {
              white-space: nowrap;
              margin: 0;
              font-size: 13px;
              margin-top: 2px;
              color: #e9d5ab;
            }
            .mouseOn {
              position: relative;
              width: 100%;
              height: 25px;
            }
            .mouseOn span {
              position: absolute;
              right: 0;
              bottom: 0;
              cursor: pointer;
              height: 31px;
              line-height: 31px;
              width: 40px;
              text-align: center;
              float: right;
              border: 1px solid rgba(255, 255, 255, 0.7);
              border-bottom: 0;
              border-radius: 40px 40px 0 0;
              background: rgba(255, 255, 255, 0.5);
            }
            .mouseOn span i {
              display: inline-block;
              font-size: 20px;
              color: #fff;
            }
            .menuArrowbox-icon-up {
              margin-left: 4px;
              transform: rotate(90deg);
              -webkit-transform: rotate(90deg);
            }
            .menuArrowbox-icon-down {
              margin-right: 4px;
              transform: rotate(-90deg);
              -webkit-transform: rotate(-90deg);
            }
            .control-module-list {
              width: -webkit-max-content;
              width: -moz-max-content;
              width: max-content;
              height: 65px;
              position: relative;
              overflow: hidden;
            }
            .control-module-list .wrap {
              position: relative;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              -webkit-flex-wrap: wrap;
              -ms-flex-wrap: wrap;
              flex-wrap: wrap;
              -webkit-transition: -webkit-transform 0.3s;
              transition: -webkit-transform 0.3s;
              transition: transform 0.3s;
              transition: transform 0.3s, -webkit-transform 0.3s;
              -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
            }

            .control-module-list .wrap .icon-box {
              margin: 0 15px;
            }
            .control-module-list .wrap .icon-box .icon .icon-wrap {
              background-color: #74c0ff;
            }
            .control-module-list .wrap .icon-wrap img {
              width: 35px;
              height: 35px;
            }
            .switch-next {
              width: 30px;
              height: 65px;
              cursor: pointer;
              color: #fff;
              background-color: #141415;
              opacity: 0.5;
            }
            .switch-prev {
              width: 30px;
              height: 65px;
              cursor: pointer;
              background-color: #141415;
              color: #fff;
              opacity: 0.5;
            }
            .control-msg-list {
              width: -webkit-max-content;
              width: -moz-max-content;
              width: max-content;
              height: 100%;
            }
            .control-msg-list .icon-box .icon .icon-wrap {
              background-color: #141415;
              opacity: 0.5;
            }
            .control-msg-list .icon-box .icon .icon-wrap i {
              font-size: 18px;
            }
            .control-normal-list {
              width: -webkit-max-content;
              width: -moz-max-content;
              width: max-content;
              height: 100%;
              position: relative;
              padding: 0 10px;
              overflow: hidden;
            }
            .control-normal-list .icon-box .icon .icon-wrap {
              position: relative;
              background-color: #141415;
              opacity: 0.5;
            }
            .control-normal-list .isstop {
              position: absolute;
              width: 100%;
              height: 100%;
              pointer-events: none;
            }
            .control-normal-list .isstop i {
              font-size: 20px !important;
              color: red !important;
            }
            /*多种风格显示*/
            .menutooltip {
              position: fixed;
              bottom: 65px;
              color: #333;
              width: 100%;
              height: auto;
              text-align: center;
              z-index: 5;
            }
            .menutooltip li {
              position: relative;
              width: 100%;
              height: 42px;
              padding: 0 15px;
              line-height: 42px;
              background-color: #191818b8;
              color: #e9d5ab;
              text-align: center;
              margin-bottom: 10px;
              border-radius: 5px;
              cursor: pointer;
            }
            .menutooltip li span {
              display: none;
            }
            .menutooltip li:hover {
              color: #4886ff;
            }
            .menutooltip li.active {
              color: #e9d5ab;
            }
            .menutooltip li.active span {
              color: #e9d5ab;
              display: block;
              font-size: 20px;
              position: absolute;
              right: 6px;
              top: 0;
            }
          </style>
          <div class="footer-controlBox down">
            <div class="mouseOn">
              <span><i class="zam-icon-openTab menuArrowbox-icon-up"></i></span>
            </div>
            <div class="footer-controlBox-main">
              <div
                class="control-module-list zam-app-flex"
                style="width: 1500.37px"
              >
                <div class="switch-prev zam-app-flex-ajCenter">
                  <span><i class="zam-icon-arrow-l"></i></span>
                </div>
                <div
                  class="wrap zam-app-flex-ajCenter2"
                  style="transform: translate3d(0px, 0px, 0px)"
                >
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.sign&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="sign"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/sign.png" />
                      </div>
                      <p class="name">签到(q)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.threed&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="threed"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/3dsign.png" />
                      </div>
                      <p class="name">3D签到(p)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.msg&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="msg"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/msg.png" />
                      </div>
                      <p class="name">上墙(w)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.lottery&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="lottery"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/lottery.png" />
                      </div>
                      <p class="name">抽奖(e)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.redpack&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="redpack"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/hby.png" />
                      </div>
                      <p class="name">红包雨(t)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.ydj&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="ydj"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/ydj.png" />
                      </div>
                      <p class="name">摇红包(g)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.answerbs&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="answerbs"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/dati.png" />
                      </div>
                      <p class="name">答题(j)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.vote&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="vote"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/vote.png" />
                      </div>
                      <p class="name">投票(u)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.baping&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="baping"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/baping.png" />
                      </div>
                      <p class="name">霸屏(h)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.shake&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="shake"
                    data-styles='[{"styleid":"1","stylename":"\u6447\u4e00\u6447","stylemodule":"shake","issel":"1"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/shake.png" />
                      </div>
                      <p class="name">摇一摇(r)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.shuqian&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="shuqian"
                    data-styles='[{"styleid":"1","stylename":"\u75af\u72c2\u6570\u94b1","stylemodule":"shuqian","issel":"1"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/shuqian.png" />
                      </div>
                      <p class="name">疯狂数钱(y)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.monkey&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="monkey"
                    data-styles='[{"styleid":"1","stylename":"\u7334\u5b50\u722c\u6811","stylemodule":"monkey","issel":"2"},{"styleid":"4","stylename":"\u5347\u56fd\u65d7","stylemodule":"monkey","issel":"1"},{"styleid":"5","stylename":"\u9e4a\u6865\u4f1a","stylemodule":"monkey","issel":"2"},{"styleid":"6","stylename":"\u95f9\u65b0\u6625","stylemodule":"monkey","issel":"2"},{"styleid":"7","stylename":"\u8d22\u795e\u5230","stylemodule":"monkey","issel":"2"},{"styleid":"8","stylename":"\u722c\u6811\u6bd4\u8d5b","stylemodule":"monkey","issel":"2"},{"styleid":"9","stylename":"\u4e18\u6bd4\u7279\u4e4b\u7bad","stylemodule":"monkey","issel":"2"},{"styleid":"12","stylename":"\u79ef\u6781\u5411\u4e0a","stylemodule":"monkey","issel":"2"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/monkey.png" />
                      </div>
                      <p class="name">升国旗(i)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.car&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="car"
                    data-styles='[{"styleid":"1","stylename":"\u6447\u6c7d\u8f66","stylemodule":"car","issel":"2"},{"styleid":"2","stylename":"\u9ec4\u5305\u8f66","stylemodule":"car","issel":"2"},{"styleid":"3","stylename":"\u5723\u8bde\u8001\u4eba","stylemodule":"car","issel":"1"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/car.png" />
                      </div>
                      <p class="name">圣诞老人(i)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.horse&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="horse"
                    data-styles='[{"styleid":"1","stylename":"3d\u8d5b\u9a6c","stylemodule":"horse","issel":"1"},{"styleid":"2","stylename":"\u5c0f\u9547\u8dd1\u8dd1","stylemodule":"horse","issel":"2"},{"styleid":"3","stylename":"\u56de\u5bb6\u8fc7\u5e74","stylemodule":"horse","issel":"2"},{"styleid":"4","stylename":"\u6e38\u8247\u6bd4\u8d5b","stylemodule":"horse","issel":"2"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/horse.png" />
                      </div>
                      <p class="name">3d赛马(o)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.mls&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="mls"
                    data-styles='[{"styleid":"1","stylename":"\u9a6c\u62c9\u677e","stylemodule":"mls","issel":"2"},{"styleid":"2","stylename":"\u725b\u6c14\u51b2\u5929","stylemodule":"mls","issel":"1"},{"styleid":"3","stylename":"\u5723\u8bde\u72c2\u6b22","stylemodule":"mls","issel":"2"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/mls.png" />
                      </div>
                      <p class="name">牛气冲天(a)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.bike&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="bike"
                    data-styles='[{"styleid":"1","stylename":"\u81ea\u884c\u8f66","stylemodule":"bike","issel":"2"},{"styleid":"2","stylename":"\u6781\u901f\u9a91\u884c","stylemodule":"bike","issel":"2"},{"styleid":"3","stylename":"\u745e\u9f20\u9001\u798f","stylemodule":"bike","issel":"2"},{"styleid":"4","stylename":"\u4e3a\u7231\u544a\u767d","stylemodule":"bike","issel":"1"},{"styleid":"5","stylename":"\u653e\u6cb3\u706f","stylemodule":"bike","issel":"2"},{"styleid":"6","stylename":"\u9c7c\u8dc3\u9f99\u95e8","stylemodule":"bike","issel":"2"},{"styleid":"7","stylename":"\u9152\u5427\u72c2\u6b22","stylemodule":"bike","issel":"2"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/bike.png" />
                      </div>
                      <p class="name">为爱告白(s)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.swim&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="swim"
                    data-styles='[{"styleid":"1","stylename":"\u6e38\u6cf3\u8d5b","stylemodule":"swim","issel":"1"},{"styleid":"2","stylename":"\u52a0\u6cb9\u9526\u9ca4","stylemodule":"swim","issel":"2"},{"styleid":"3","stylename":"\u6781\u901f\u706b\u7bad","stylemodule":"swim","issel":"2"},{"styleid":"4","stylename":"\u544a\u767d\u6c14\u7403","stylemodule":"swim","issel":"2"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/swim.png" />
                      </div>
                      <p class="name">游泳赛(d)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.tug&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="tug"
                    data-styles='[{"styleid":"1","stylename":"\u62d4\u6cb3\u8d5b","stylemodule":"tug","issel":"1"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/bahe.png" />
                      </div>
                      <p class="name">拔河赛(f)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.dgshake&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="dgshake"
                    data-styles='[{"styleid":"11","stylename":"\u52a8\u611f\u6447\u4e00\u6447","stylemodule":"dgshake","issel":"1"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/dgshake.png" />
                      </div>
                      <p class="name">动感摇一摇(c)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.cutfruit&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="cutfruit"
                    data-styles='[{"styleid":"1","stylename":"\u5207\u6c34\u679c","stylemodule":"cutfruit","issel":"1"}]'
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/cutfruit.png" />
                      </div>
                      <p class="name">切水果(n)</p>
                    </div>
                  </div>
                  <div
                    data-href="./index.php?i=2&amp;c=entry&amp;m=meepo_xianchangv2&amp;do=mobile&amp;r=screen.kaimu&amp;hdid=wkbtx09raxkc17enjy7ccit4crauj0xk&amp;hdhash="
                    data-module="kaimu"
                    data-styles="0"
                    class="icon-box zam-app-flex-ajCenter2"
                  >
                    <div class="icon zam-app-flex-ajCenter">
                      <div
                        class="icon-wrap zam-app-flex-ajCenter"
                        style="background-color: #4886ff"
                      >
                        <img src="./static/kaimu.png" />
                      </div>
                      <p class="name">首页(j)</p>
                    </div>
                  </div>
                </div>
                <div class="switch-next zam-app-flex-ajCenter">
                  <span><i class="zam-icon-arrow-r"></i></span>
                </div>
              </div>
              <div class="control-msg-list zam-app-flex-ajCenter2"></div>
              <div class="control-normal-list zam-app-flex-ajCenter2">
                <div class="icon-box bgmusic-icon-box zam-app-flex-ajCenter2">
                  <div class="icon zam-app-flex-ajCenter">
                    <div
                      class="icon-wrap zam-app-flex-ajCenter2 openmusic"
                      data-open="1"
                    >
                      <i class="mxc-unie66b"></i>
                      <div class="isstop zam-app-flex-ajCenter2 display-none">
                        <i class="mxc-untitled56"></i>
                      </div>
                    </div>
                    <p class="name">音效 (1)</p>
                  </div>
                </div>
                <div class="icon-box fulldm-icon-box zam-app-flex-ajCenter2">
                  <div class="icon zam-app-flex-ajCenter">
                    <div class="icon-wrap zam-app-flex-ajCenter2 opendm">
                      <i class="mxc-subtitle_block_light"></i>
                      <div class="isstop zam-app-flex-ajCenter2">
                        <i class="mxc-untitled56"></i>
                      </div>
                    </div>
                    <p class="name">弹幕 (2)</p>
                  </div>
                </div>
                <div class="icon-box zam-app-flex-ajCenter2">
                  <div class="icon zam-app-flex-ajCenter">
                    <div class="icon-wrap zam-app-flex-ajCenter2 openqr">
                      <i class="mxc-unie6b0"></i>
                      <div
                        class="isstop zam-app-flex-ajCenter2"
                        style="display: none"
                      >
                        <i class="mxc-untitled56"></i>
                      </div>
                    </div>
                    <p class="name">二维码 (3)</p>
                  </div>
                </div>
                <div class="icon-box zam-app-flex-ajCenter2">
                  <div class="icon zam-app-flex-ajCenter">
                    <div
                      class="icon-wrap zam-app-flex-ajCenter2 openfull"
                      data-open="2"
                    >
                      <i class="mxc-full"></i>
                    </div>
                    <p class="name">全屏 (4)</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <style>
            .fulldmBox {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              overflow: hidden;
              pointer-events: none;
              z-index: 11;
            }
            .fulldmBox-item {
              position: absolute;
              height: 100px;
              padding: 10px 0;
              border: 0;
              left: 0;
              top: 0;
            }
            .fulldmBox-wrapper {
              height: 80px;
              padding: 0 15px;
              border-radius: 5px;
              background-color: rgba(0, 0, 0, 0.5);
            }
            .fulldmBox-avatar {
              height: 80px;
              padding: 10px 0;
              margin-right: 10px;
            }
            .fulldmBox-avatar img {
              width: 60px;
              height: 60px;
              display: inline-block;
              border-radius: 50%;
              margin-right: 5px;
            }

            .fulldmBox-info {
              height: 80px;
              color: #ffffff;
              font-size: 30px;
            }
            .fulldmBox-nickname {
              height: 80px;
              line-height: 80px;
              white-space: nowrap;
              margin-right: 4px;
            }
            .fulldmBox-msg {
              height: 80px;
              line-height: 80px;
              white-space: nowrap;
            }
            .fulldmBox-msg .faceImg {
              width: 30px;
              height: 30px;
              margin-top: 25px;
            }
          </style>
          <div class="fulldmBox"></div>
          <script type="text/html" id="fulldm-tpl">
            <div class="fulldmBox-item fulldm-{{ id }}">
              <div class="fulldmBox-wrapper zam-app-flex">
                {{ if needavatar=='1'}}
                <div class="fulldmBox-avatar">
                  <img src="{{ avatar }}" class="imgavatar" />
                </div>
                {{ /if }}
                <div class="fulldmBox-info zam-app-flex">
                  {{ if neednickname=='1'}}
                  <div class="fulldmBox-nickname">{{ nickname }}:</div>
                  {{ /if }}
                  <div class="fulldmBox-msg">{{# content }}</div>
                </div>
              </div>
            </div>
          </script>
          <style>
            .hdQrbox {
              position: absolute;
              top: 20%;
              left: 80%;
              width: 200px;
              color: #646464;
              display: none;
              z-index: 9;
            }
            .hdQrbox.active:before {
              content: "";
              width: 100%;
              height: 100%;
              position: absolute;
              left: -2px;
              top: -2px;
              border: 2px solid #4886ff;
              z-index: -1;
            }
            .hdQrbox-txt {
              margin: 0;
              height: 40px;
              color: #fff;
              text-align: center;
              line-height: 40px;
              cursor: default;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              box-sizing: border-box;
            }
            .hdQrbox img {
              display: block;
              width: 100%;
              height: calc(100% - 40px);
              vertical-align: middle;
              cursor: move;
              border-radius: 5px;
            }
            .hdQrbox span {
              width: 10px;
              height: 10px;
              overflow: hidden;
              border-radius: 10px;
              background-color: #4886ff;
              position: absolute;
              cursor: nwse-resize;
              display: none;
            }
            .hdQrbox.active span {
              display: block;
            }
            .hdQrbox .bl,
            .hdQrbox .tl,
            .hdQrbox .lc {
              left: -6px;
            }
            .hdQrbox .br,
            .hdQrbox .tr,
            .hdQrbox .rc {
              right: -6px;
            }
            .hdQrbox .bl,
            .hdQrbox .br {
              bottom: -6px;
            }
            .hdQrbox .tl,
            .hdQrbox .tr {
              top: -6px;
            }
            .hdQrbox .bl,
            .hdQrbox .tr {
              cursor: nesw-resize;
            }
            .hdQrbox .lc,
            .hdQrbox .rc {
              top: calc(50% - 2.5px);
              cursor: w-resize;
              display: none;
            }
          </style>
          <div
            class="hdQrbox ui-draggable"
            style="
              width: 200px;
              height: 240px;
              left: 1451.28px;
              top: 280px;
              display: block;
            "
          >
            <span class="tr"></span>
            <span class="tl"></span>
            <span class="br"></span>
            <span class="bl"></span>
            <div style="width: 100%; height: 100%">
              <img
                src=""
              />
              <p class="hdQrbox-txt">微信扫码参与互动</p>
            </div>
          </div>
        </div>
        <!--full-main-->
      </div>
      <!--pc-box-->
      <div class="pcbgBox">
        <div class="main-bg"></div>
      </div>
      <audio
        id="bgmusic"
        src="https://v.xindongxc.com/addons/meepo_xianchangv2/template/resource/images/screen/common/bg.mp3"
        loop="loop"
      ></audio>
      <script type="text/html" id="google-tpl">
        <div class="broswer-tip zam-app-flex-ajCenter2">
        		<i class="mxc-infofill"></i>
        		<p class="red">为了保证您的使用效果，强烈推荐使用</p>
        		<a class="downgoogle" href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">
        			<div class="zam-app-flex-ajCenter2">
        				<img  src="https://v.xindongxc.com/addons/meepo_xianchangv2/template/resource/images/screen/common/google.png">
        				<span>谷歌浏览器</span>
        			</div>
        		</a>
        		<div class="close-broswer-tip" onclick="javascript:$('.broswer-tip').remove();">
        			<i class="mxc-roundclose"></i>
        		</div>
        	</div>
        </div>
      </script>
      <script>
        require([
          "screencore",
          "template",
          "layerBox",
          "marqueen",
          "screensocket",
          "fulldm",
          "keyboard",
          "dragqr",
        ], function (
          screencore,
          template,
          layerBox,
          marqueen,
          screensocket,
          fulldm,
          keyboardJS,
          dragqr
        ) {
          //初始化是否为谷歌
          var ischrome = navigator.userAgent.indexOf("Chrome") > -1;
          if (!ischrome) {
            $("body").append(template("google-tpl", {}));
          }
          //初始化弹幕
          fulldm.init($(".fulldmBox"), {
            id: "3750",
            hdid: "3788",
            opendm: "1",
            dmspeed: "1",
            isloop: "1",
            loadhistory: "1",
            historynum: "0",
            needbg: "1",
            bgcolor: "rgba(0,0,0,0.5)",
            needavatar: "1",
            neednickname: "1",
            fontcolor: "#ffffff",
            fontsize: "30",
            bgcolortype: "1",
            fontcolortype: "1",
          });
          $(".control-normal-list .opendm").on("click", function () {
            if (!fulldm.isBullet) {
              //开启弹幕
              fulldm.open();
              window.localStorage.setItem("openfulldm" + XCV2Config.hdid, "1");
            } else {
              //关闭弹幕
              fulldm.close();
              window.localStorage.setItem("openfulldm" + XCV2Config.hdid, "2");
            }
          });
          //底部控制器
          $(".footer-controlBox").on("mouseover", function () {
            $(".footer-controlBox").removeClass("down").addClass("up");
            $(".menuArrowbox-icon-up")
              .removeClass("menuArrowbox-icon-up")
              .addClass("menuArrowbox-icon-down");
          });
          $(".footer-controlBox").on("mouseleave", function () {
            $(".menutooltip").remove();
            $(".footer-controlBox").removeClass("up").addClass("down");
            $(".menuArrowbox-icon-down")
              .removeClass("menuArrowbox-icon-down")
              .addClass("menuArrowbox-icon-up");
          });
          $(".footer-controlBox .menuArrowbox").on("click", function () {
            if ($(".menuArrowbox-icon-down").length > 0) {
              $(".menuArrowbox-icon-down")
                .removeClass("menuArrowbox-icon-down")
                .addClass("menuArrowbox-icon-up");
              $(".footer-controlBox").removeClass("down").addClass("up");
            } else {
              $(".menuArrowbox-icon-up")
                .removeClass("menuArrowbox-icon-up")
                .addClass("menuArrowbox-icon-down");
              $(".footer-controlBox").removeClass("up").addClass("down");
            }
          });
          $(".control-module-list .icon-box").on("click", function () {
            var $this = $(this);
            if (XCV2Config.screenfollow == "1") {
              screencore
                .ajaxSubmit("screen.commonmand", {
                  module: $this.attr("data-module"),
                })
                .then(
                  function (data) {
                    if (data.errno == 0) {
                      screensocket.isclose = false;
                    } else {
                      layerBox.showMsg(data.message);
                    }
                  },
                  function () {
                    layerBox.showMsg("网络太差，请稍后重试.");
                  }
                );
            }
            window.location.href = $this.attr("data-href");
          });
          $(".control-module-list .icon-box").on("mouseenter", function (e) {
            $(".menutooltip").remove();
            var moduleStyles = $(this).attr("data-styles");
            if (moduleStyles != "0") {
              moduleStyles = JSON.parse(moduleStyles);
              var left = $(this).offset().left - 30;
              var css =
                "left:" + left + "px;width:" + $(this).outerWidth(true) + "px";
              var html = "<ul class='menutooltip' style='" + css + "'>";
              $.each(moduleStyles, function (i, v) {
                html +=
                  "<li data-styleid=" +
                  v.styleid +
                  " data-module=" +
                  v.stylemodule +
                  "  class=" +
                  (v.issel == "1" ? "active" : "") +
                  " >" +
                  v.stylename +
                  "<span class='mxc-unie657'></span></li>";
              });
              html += "</ul>";
              $(".footer-controlBox").append(html);
            }
          });
          $(".footer-controlBox").on("click", ".menutooltip li", function () {
            var $this = $(this);
            var isactive = $this.hasClass("active") ? "1" : "2";
            screencore
              .ajaxSubmit("screen.stylecommand", {
                module: $this.attr("data-module"),
                styleid: $this.attr("data-styleid"),
                isactive: isactive,
              })
              .then(
                function (data) {
                  if (data.errno == 0) {
                    screensocket.isclose = false;
                    window.location.href = data.message;
                  } else {
                    layerBox.showMsg(data.message);
                  }
                },
                function () {
                  console.log("网络太差，请稍后重试.");
                }
              );
          });
          $(".headerTitle li").length > 0 &&
            marqueen.init(".headerTitle", 0.02, 10e3);
          $("body")
            .on("mouseenter", "*[lay-tips]", function () {
              var e = this;
              layerBox.showTips(
                $(e).attr("lay-tips"),
                e,
                $(e).attr("lay-direction")
              );
            })
            .on("mouseleave", "*[lay-tips]", function () {
              layerBox.close($(this).data("index"));
            })
            .on("click", "*[lay-tips]", function () {
              layerBox.close($(this).data("index"));
            });
          $(".control-module-list .switch-next").on("click", function () {
            $(".menutooltip").remove();
            modulepage >= footerMenu_tp ? (modulepage = 1) : modulepage++;
            $(".control-module-list .wrap").css({
              transform:
                "translate3d(0px," + (-modulepage * 65 + 65) + "px, 0px)",
            });
          });
          $(".control-module-list .switch-prev").on("click", function () {
            $(".menutooltip").remove();
            modulepage == 1 ? (modulepage = footerMenu_tp) : modulepage--;
            $(".control-module-list .wrap").css({
              transform:
                "translate3d(0px," + (-modulepage * 65 + 65) + "px, 0px)",
            });
          });
          //二维码显示
          dragqr.init(".hdQrbox", true);
          $(".control-normal-list .openqr").on("click", function (e, params) {
            var stopicon = $(this).find(".isstop");
            if ($(".hdQrbox").is(":hidden")) {
              $(".hdQrbox").fadeIn();
              stopicon.hide();
              params != "1" &&
                window.localStorage.setItem("openqr" + XCV2Config.hdid, "1");
            } else {
              $(".hdQrbox").fadeOut();
              stopicon.show();
              params != "1" &&
                window.localStorage.setItem("openqr" + XCV2Config.hdid, "2");
            }
          });
          var openqrstatus = window.localStorage.getItem(
            "openqr" + XCV2Config.hdid
          );
          openqrstatus != "2" &&
            $(".control-normal-list .openqr").trigger("click");
          //全屏操作
          $(".control-normal-list .openfull").on("click", function () {
            if ($(this).attr("data-open") == "2") {
              screencore.fullScreen();
              $(this).attr("data-open", "1");
            } else {
              screencore.exitFullScreen();
              $(this).attr("data-open", "2");
            }
          });
          //音效开关
          //二维码显示
          $(".control-normal-list .openmusic").on("click", function () {
            if ($("#bgmusic").length <= 0) return;
            var stopicon = $(this).find(".isstop");
            if ($(this).attr("data-open") == "1") {
              stopicon.removeClass("display-none");
              $("#bgmusic")[0].pause();
              $(this).attr("data-open", "2");
            } else {
              $("#bgmusic")[0].play();
              stopicon.addClass("display-none");
              $(this).attr("data-open", "1");
            }
          });
          if (
            XCV2Config.gametype != "baping" &&
            XCV2Config.openbgmusic == "1" &&
            $("#bgmusic").length > 0
          )
            $(".control-normal-list .openmusic").trigger("click");
          $(window).resize(function () {
            if ($(".videoBg").length > 0) {
              screencore.videofullScreen(
                ".videoBg",
                screencore.getvideoData($(".videoBg")[0])
              );
            }
          });
          //音效开关
          keyboardJS.bind("1", function (e) {
            $(".control-normal-list .openmusic").trigger("click");
          });
          //二维码开关
          keyboardJS.bind("2", function (e) {
            $(".control-normal-list .opendm").trigger("click");
          });
          //弹幕开关
          keyboardJS.bind("3", function (e) {
            $(".control-normal-list .openqr").trigger("click");
          });
          //全屏开关
          keyboardJS.bind("4", function (e) {
            $(".control-normal-list .openfull").trigger("click");
          });
          //恢复初始状态二维码开关
          keyboardJS.bind("5", function (e) {
            $(".hdQrbox img").trigger("dblclick");
          });
          //模块快捷键
          keyboardJS.bind("q", function (e) {
            $(".control-module-list .icon-box[data-module='sign']").trigger(
              "click"
            );
          });
          keyboardJS.bind("p", function (e) {
            $(".control-module-list .icon-box[data-module='threed']").trigger(
              "click"
            );
          });
          keyboardJS.bind("w", function (e) {
            $(".control-module-list .icon-box[data-module='msg']").trigger(
              "click"
            );
          });
          keyboardJS.bind("e", function (e) {
            $(".control-module-list .icon-box[data-module='lottery']").trigger(
              "click"
            );
          });
          keyboardJS.bind("t", function (e) {
            $(".control-module-list .icon-box[data-module='redpack']").trigger(
              "click"
            );
          });
          keyboardJS.bind("g", function (e) {
            $(".control-module-list .icon-box[data-module='ydj']").trigger(
              "click"
            );
          });
          keyboardJS.bind("j", function (e) {
            $(".control-module-list .icon-box[data-module='answerbs']").trigger(
              "click"
            );
          });
          keyboardJS.bind("u", function (e) {
            $(".control-module-list .icon-box[data-module='vote']").trigger(
              "click"
            );
          });
          keyboardJS.bind("h", function (e) {
            $(".control-module-list .icon-box[data-module='baping']").trigger(
              "click"
            );
          });
          keyboardJS.bind("r", function (e) {
            $(".control-module-list .icon-box[data-module='shake']").trigger(
              "click"
            );
          });
          keyboardJS.bind("y", function (e) {
            $(".control-module-list .icon-box[data-module='shuqian']").trigger(
              "click"
            );
          });
          keyboardJS.bind("i", function (e) {
            $(".control-module-list .icon-box[data-module='monkey']").trigger(
              "click"
            );
          });
          keyboardJS.bind("i", function (e) {
            $(".control-module-list .icon-box[data-module='car']").trigger(
              "click"
            );
          });
          keyboardJS.bind("o", function (e) {
            $(".control-module-list .icon-box[data-module='horse']").trigger(
              "click"
            );
          });
          keyboardJS.bind("a", function (e) {
            $(".control-module-list .icon-box[data-module='mls']").trigger(
              "click"
            );
          });
          keyboardJS.bind("s", function (e) {
            $(".control-module-list .icon-box[data-module='bike']").trigger(
              "click"
            );
          });
          keyboardJS.bind("d", function (e) {
            $(".control-module-list .icon-box[data-module='swim']").trigger(
              "click"
            );
          });
          keyboardJS.bind("f", function (e) {
            $(".control-module-list .icon-box[data-module='tug']").trigger(
              "click"
            );
          });
          keyboardJS.bind("c", function (e) {
            $(".control-module-list .icon-box[data-module='dgshake']").trigger(
              "click"
            );
          });
          keyboardJS.bind("n", function (e) {
            $(".control-module-list .icon-box[data-module='cutfruit']").trigger(
              "click"
            );
          });
          keyboardJS.bind("j", function (e) {
            $(".control-module-list .icon-box[data-module='kaimu']").trigger(
              "click"
            );
          });
        });
      </script>
      <script>
        var imgs = document.getElementsByTagName("img");
        for (var i = 0, len = imgs.length; i < len; i++) {
          imgs[i].onerror = function () {
            if (
              !this.getAttribute("check-src") &&
              (this.src.indexOf("http://") > -1 ||
                this.src.indexOf("https://") > -1)
            ) {
              this.src =
                this.src.indexOf("https://v.xindongxc.com/attachment/") == -1
                  ? this.src.replace(
                      "https://hdfj.xindongxc.com/",
                      "https://v.xindongxc.com/attachment/"
                    )
                  : this.src.replace(
                      "https://v.xindongxc.com/attachment/",
                      "https://hdfj.xindongxc.com/"
                    );
              this.setAttribute("check-src", true);
            }
          };
        }
      </script>
      <script type="text/javascript" src="./static/index.php"></script>
    </div>
  </body>
</html>
